<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nested Routes</title>
</head>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<body>
<h1>Nested Routes</h1>
<div id="app">

    <p>
        <router-link to="/user/foo">Go to Foo</router-link>&nbsp;&nbsp;
        <router-link to="/user/foo/profile">Go to Foo Profile</router-link>&nbsp;&nbsp;
        <router-link to="/user/foo/posts">Go to Foo Posts</router-link>&nbsp;&nbsp;
        <router-link to="/user/foo/">Go to Foo Home</router-link>&nbsp;&nbsp;
    </p>
    <router-view></router-view>
</div>
</body>
<script>
    /**
     * Real app UIs are usually composed of components that are nested multiple levels deep. It is also very common that the segments of a URL corresponds to a certain structure of nested components, for example:

     /user/foo/profile                     /user/foo/posts
     +------------------+                  +-----------------+
     | User             |                  | User            |
     | +--------------+ |                  | +-------------+ |
     | | Profile      | |  +------------>  | | Posts       | |
     | |              | |                  | |             | |
     | +--------------+ |                  | +-------------+ |
     +------------------+                  +-----------------+
     With vue-router, it is very simple to express this relationship using nested route configurations.

     */


    /**
     * The <router-view> here is a top-level outlet. It renders the component matched by a top level route.
     * Similarly,a rendered component can also contain its own, nested <router-view>.
     * For example, if we add one inside the User component's template:
     *
     */
    const User = {
        template: `
                    <div class="user" style="border:1px solid red;width: 500px;height: 500px;">
                      <h2>User {{ $route.params.id }}</h2>
                      <router-view></router-view>
                    </div>
                  `
    }

    const UserProfile = {
        template: `<div style="width: 200px;height: 200px;border:5px solid blue;">UserProfile</div>`
    }

    const UserPosts = {
        template: `<div style="width: 200px;height: 200px;border:5px solid darkgreen;">UserPosts</div>`
    }

    const UserHome = {
        template: `<div style="width: 200px;height: 200px;border:5px solid darkmagenta;">UserHome</div>`
    }


    const router = new VueRouter({
        routes: [
            { path: '/user/:id', component: User,
                children: [
                    {
                        // UserProfile will be rendered inside User's <router-view>
                        // when /user/:id/profile is matched
                        path: 'profile',
                        component: UserProfile
                    },
                    {
                        // UserPosts will be rendered inside User's <router-view>
                        // when /user/:id/posts is matched
                        path: 'posts',
                        component: UserPosts
                    },
                    {
                        // UserHome will be rendered inside User's <router-view>
                        // when /user/:id is matched
                        path: '',
                        component: UserHome
                    }
                ]
            }
        ]

    })


    const app = new Vue({
        router
    }).$mount('#app')




</script>
</html>